<template>
  <div class="building-control">
    <div class="building-left" ref="modelingSettingsLeft">
      <panel-aside @onSearch="onProduct" ref="productInfo"></panel-aside>
    </div>
    <div class="building-right">
      <div class="kan" style="height:40px;line-height:40px;">
        <span style="font-size:24px;color:#333;font-weight: bold;">{{ product.productName }}</span>
        <Button type="primary" class="aciton" style="margin-left:10px;"> <a
            href="https://images.tospurfang.com/doc/%E9%94%80%E6%8E%A7%E7%AE%A1%E7%90%86%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
            style="color:#fff;" target="_blank">查看操作指引</a>
        </Button>
      </div>
      <!--汇总数据-->
      <building-count :counts='counts'></building-count>
      <!--楼栋列表-->
      <div class="flex flex-wrap" ref="TableHeight"
        :style="{ height: onresizeHeight + 'px' ,overflow: 'auto', alignContent: 'flex-start'}">
        <div v-for="(item,index) in buildings" :key="index">
          <building-item :item='item' @choice='onBuilding' @sellControl='onSellControl'>
          </building-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import panelAside from '../../buildingModeling/modelingSettings/components/panelAside.vue'
  import buildingItem from './components/buildingItem.vue'
  import buildingCount from './components/buildingCount.vue'

  import controlMgr from '@/biz/sales/control'
  export default {
    components: {
      panelAside,
      buildingItem,
      buildingCount,
    },
    data() {
      return {
        onresizeHeight: '',
        product: {},
        counts: [],
        buildings: [],
      }
    },
    computed: {},
    watch: {},
    mounted() {
      setTimeout(() => {
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.offsetTop - 50
      }, 200)
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight =
              window.innerHeight - this.$refs.TableHeight.offsetTop - 50
          }, 10)
        })()
      }
    },
    methods: {
      update() {
        controlMgr
          .buildingInfos(this.product.productId)
          .then((res) => {
            this.buildings = res.buildings
            this.counts = res.counts
          })
          .catch((err) => {
            this.$Message.error(err)
            this.buildings = []
            this.counts = {}
          })
      },
      // 选择产品
      onProduct(product) {
        this.product = product?product:{}
        product && this.update()
      },
      onBuilding(building) {
        this.$router.push({
          name: `roomControl`,
          query: {
            buildingId: building.buildingId,
            productId: this.product.productId,
            productType: this.product.productType,
          },
        })
      },
      onSellControl(building) {
        controlMgr
          .buildingSellControl(building.buildingId, !building.isSellControl)
          .then((res) => {
            this.update()
          })
      },
    },
  }
</script>
<style lang='scss' scoped>
  .building-control {
    margin-bottom: 20px;
    padding: 10px;
    display: flex;
    width: 100%;
    overflow: hidden;

    .building-left {
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      flex: 0 0 300px;

      .proBox {
        border-bottom: 1px solid #dcdee2;
        padding: 5px 0;
        cursor: pointer;

        .pro {
          padding: 5px 10px;

          p.p1 {
            margin-bottom: 10px;
          }

          p.p2 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          }
        }
      }

      .proBg {
        background: #87ceeb;
        color: #fff;
      }
    }

    .building-right {
      width: calc(100% - 300px);
      padding: 10px;

      h2 {
        padding: 10px 0;

      }
    }
  }

  .kan {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #dadada;
  }
</style>